<template>
  <div class="account-page">
    <div class="loginDiv" v-if="!isLogin">
      <el-form ref="form" :model="loginForm" style="width: 100%; margin: 0 auto;">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login()" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="info-container" v-else>
      <div class="info-scroll">
        <div class="infoDiv">
          <el-form :model="infoForm" label-width="150px" label-position="left" size="small">
            <el-form-item label="用户昵称 | 注册时间">
              <el-input v-model="infoForm.nickname" style="width: 50%;"></el-input>
              <el-input v-model="infoForm.registrationTime" disabled style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="用户账号 | 用户密码">
              <el-input v-model="infoForm.username" style="width: 50%;" disabled></el-input>
              <el-input v-model="infoForm.password" style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="用户状态 | 剩余周数">
              <el-input v-model="infoForm.roles" disabled style="width: 50%;"></el-input>
              <el-input v-model="infoForm.weeks" disabled style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="添加权限 | 查询权限">
              <el-input v-model="infoForm.addPermissions" disabled style="width: 50%;"></el-input>
              <el-input v-model="infoForm.queryPermissions" disabled style="width: 50%;"></el-input>
            </el-form-item>
            <el-form-item label="腾讯 OCR - SecretId 腾讯 OCR-SecretKey">
              <el-input v-model="infoForm.txOcrSecretId"></el-input>
              <el-input v-model="infoForm.txOcrSecretKey"></el-input>
            </el-form-item>
            <el-form-item label="腾讯 GPT - SecretId  腾讯 GPT - SecretKey">
              <el-input v-model="infoForm.txGptSecretId"></el-input>
              <el-input v-model="infoForm.txGptSecretKey"></el-input>
            </el-form-item>
            <!-- eslint-disable -->
            <el-form-item label="腾讯 GPT - - - Model  腾讯 区域">
              <el-input v-model="infoForm.txGptModel"></el-input>
              <el-select v-model="infoForm.txAddress" placeholder="请选择离您较近的区域区域" style="width: 100%">
                <el-option label="北京" value="ap-beijing"></el-option>
                <el-option label="广州" value="ap-guangzhou"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="百度 GPT - - APIKey 百度 GPT - SecretKey">
              <el-input v-model="infoForm.bdApiKey"></el-input>
              <el-input v-model="infoForm.bdSecretKey"></el-input>
            </el-form-item>
            <el-form-item label="讯飞 GPT - - APPID 讯飞GPT-APISecret 讯飞GPT-APIKey">

              <el-input v-model="infoForm.xfAppId"></el-input>
              <el-input v-model="infoForm.xfApiSecret"></el-input>
              <el-input v-model="infoForm.xfApiKey"></el-input>
            </el-form-item>
            <el-form-item label="火山 GPT - -  APIKey 火山 GPT - ModelId">
              <el-input v-model="infoForm.hsApiKey"></el-input>
              <el-input v-model="infoForm.hsModel"></el-input>
            </el-form-item>
            <el-form-item label="阿里 GPT - -  APIKey ">
              <el-input v-model="infoForm.alApiKey"></el-input>
            </el-form-item>
            <el-form-item label="DeepSeek - APIKey ">
              <el-input v-model="infoForm.dpApiKey"></el-input>
            </el-form-item>
            <el-form-item label="参数方案 | 方案1">
              <el-select v-model="infoForm.coordinate" placeholder="参数方案" style="width: 50%">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
              </el-select>
                <el-input v-model="infoForm.coordinate1" disabled style="width: 50%"></el-input>
            </el-form-item>

            <el-form-item label="方案2 | 方案3">
              <el-input v-model="infoForm.coordinate2" style="width: 50%"></el-input>
              <el-input v-model="infoForm.coordinate3" style="width: 50%"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button @click="do_update" style="width: 100%" type="danger" plain size="small" icon="el-icon-finished">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import apiClient from '@/utils/axios'
import { ElMessage } from 'element-plus'

interface LoginForm {
  username: string
  password: string
}

interface UserData {
  id: number
  nickname: string
  username: string
  password: string
  roles: string
  weeks: number
  addPermissions: boolean
  queryPermissions: boolean
  registrationTime: string
  txOcrSecretId: string
  txOcrSecretKey: string
  txGptSecretId: string
  txGptSecretKey: string
  txGptModel: string
  txAddress: string
  bdApiKey: string
  bdSecretKey: string
  xfAppId: string
  xfApiSecret: string
  xfApiKey: string
  hsApiKey: string
  hsModel: string
  alApiKey: string
  dpApiKey: string
  coordinate: number
  coordinate1: string
  coordinate2: string
  coordinate3: string
}

// 展示到表单上的信息结构（权限字段使用字符串文案，不包含 id）
interface InfoForm {
  nickname: string
  username: string
  password: string
  roles: string
  weeks: number
  addPermissions: string
  queryPermissions: string
  registrationTime: string
  txOcrSecretId: string
  txOcrSecretKey: string
  txGptSecretId: string
  txGptSecretKey: string
  txGptModel: string
  txAddress: string
  bdApiKey: string
  bdSecretKey: string
  xfAppId: string
  xfApiSecret: string
  xfApiKey: string
  hsApiKey: string
  hsModel: string
  alApiKey: string
  dpApiKey: string
  coordinate: number
  coordinate1: string
  coordinate2: string
  coordinate3: string
}

const router = useRouter()

const isLogin = ref<boolean>(false)
const userData = ref<UserData | null>(null)

const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
})

const infoForm = reactive<InfoForm>({
  nickname: '',
  username: '',
  password: '',
  roles: '',
  weeks: 0,
  addPermissions: '',
  queryPermissions: '',
  registrationTime: '',
  txOcrSecretId: '',
  txOcrSecretKey: '',
  txGptSecretId: '',
  txGptSecretKey: '',
  txGptModel: '',
  txAddress: '',
  bdApiKey: '',
  bdSecretKey: '',
  xfAppId: '',
  xfApiSecret: '',
  xfApiKey: '',
  hsApiKey: '',
  hsModel: '',
  alApiKey: '',
  dpApiKey: '',
  coordinate: 1,
  coordinate1: '',
  coordinate2: '',
  coordinate3: '',
})

const login = () => {
  if (loginForm.username === '' || loginForm.password === '') {
    ElMessage({
      message: '账号或密码不能为空',
      type: 'warning',
      placement: 'top-right',
    })
    return
  }
  apiClient
    .post('/user/web_login', {
      username: loginForm.username,
      password: loginForm.password,
    })
    .then((res) => {
      if (res.data.status === 200) {
        sessionStorage.setItem('data', JSON.stringify(res.data.data))
        sessionStorage.setItem('isLogin', '1')
        isLogin.value = false
        userData.value = res.data.data
        ElMessage({
          message: res.data.msg,
          type: 'success',
          placement: 'top-right',
        })
        sessionStorage.setItem('weeks', res.data.data.weeks)
        sessionStorage.setItem('roles', res.data.data.roles)
        sessionStorage.setItem('addPermissions', res.data.data.addPermissions)
        sessionStorage.setItem('queryPermissions', res.data.data.queryPermissions)
        localStorage.setItem('username', loginForm.username)
        localStorage.setItem('password', loginForm.password)
        location.reload()
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
          placement: 'top-right',
        })
      }
    })
}

const do_update = () => {
  if (!userData.value) {
    ElMessage({
      message: '用户信息为空，无法提交',
      type: 'error',
      placement: 'top-right',
    })
    return
  }
  apiClient({
    url: '/user/update_info',
    method: 'put',
    data: {
      id: userData.value.id,
      nickname: infoForm.nickname,
      username: infoForm.username,
      password: infoForm.password,
      txOcrSecretId: infoForm.txOcrSecretId,
      txOcrSecretKey: infoForm.txOcrSecretKey,
      txGptSecretId: infoForm.txGptSecretId,
      txGptSecretKey: infoForm.txGptSecretKey,
      txGptModel: infoForm.txGptModel,
      txAddress: infoForm.txAddress,
      bdApiKey: infoForm.bdApiKey,
      bdSecretKey: infoForm.bdSecretKey,
      xfAppId: infoForm.xfAppId,
      xfApiSecret: infoForm.xfApiSecret,
      xfApiKey: infoForm.xfApiKey,
      hsApiKey: infoForm.hsApiKey,
      hsModel: infoForm.hsModel,
      alApiKey: infoForm.alApiKey,
      dpApiKey: infoForm.dpApiKey,
      coordinate: infoForm.coordinate,
      coordinate2: infoForm.coordinate2,
      coordinate3: infoForm.coordinate3,
    },
  }).then((res) => {
    if (res.data.status === 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
        placement: 'top-right',
      })
      router.push('/')
    }
  })
}

const move_info = () => {
  if (!userData.value) return
  const u = userData.value
  infoForm.nickname = u.nickname
  infoForm.username = u.username
  infoForm.password = u.password
  infoForm.roles = u.roles
  infoForm.weeks = u.weeks
  infoForm.addPermissions = u.addPermissions ? '有添加权限' : '没有添加权限'
  infoForm.queryPermissions = u.queryPermissions ? '有查询权限' : '没有查询权限'
  infoForm.registrationTime = u.registrationTime
  infoForm.txOcrSecretId = u.txOcrSecretId
  infoForm.txOcrSecretKey = u.txOcrSecretKey
  infoForm.txGptSecretId = u.txGptSecretId
  infoForm.txGptSecretKey = u.txGptSecretKey
  infoForm.txGptModel = u.txGptModel
  infoForm.txAddress = u.txAddress
  infoForm.bdApiKey = u.bdApiKey
  infoForm.bdSecretKey = u.bdSecretKey
  infoForm.xfAppId = u.xfAppId
  infoForm.xfApiSecret = u.xfApiSecret
  infoForm.xfApiKey = u.xfApiKey
  infoForm.hsApiKey = u.hsApiKey
  infoForm.hsModel = u.hsModel
  infoForm.alApiKey = u.alApiKey
  infoForm.dpApiKey = u.dpApiKey
  infoForm.coordinate = u.coordinate
  infoForm.coordinate1 = u.coordinate1
  infoForm.coordinate2 = u.coordinate2
  infoForm.coordinate3 = u.coordinate3
}

onMounted(() => {
  loginForm.username = localStorage.getItem('username') || ''
  loginForm.password = localStorage.getItem('password') || ''
  isLogin.value = sessionStorage.getItem('isLogin') === '1'
  const stored = sessionStorage.getItem('data')
  if (stored) {
    try {
      userData.value = JSON.parse(stored)
    } catch (e) {
      console.error('parse user data error', e)
    }
  }
  move_info()
})
</script>

<style scoped>
.account-page {
  height: 100vh;
  border: 1px solid #545454;
  border-radius: 5px;
  margin: 5px;
  background-color: rgba(229, 211, 202, 0.42);
  display: flex;
  flex-direction: column;
  position: relative;
}

.loginDiv {
  text-align: center;
  width: 50%;
  padding: 50px;
  border: 1px solid #483939;
  background-color: rgba(255, 255, 255, 0.53);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border-radius: 10px;
  margin: 30vh auto 0;
}

.info-container {
  flex: 1;
  position: relative;
  height: 100%;
}

.info-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

.infoDiv {
  margin: 10px;
  padding-bottom: 60px;
}


</style>